<template>
    <Draggable v-model="list">
        <mu-button small flat :color="setType(item.state)" @click="change(item)" v-for="item in list" :key="item.key">
            <mu-icon :value="setIcon(item.state)" left></mu-icon>
            {{item.label}}
        </mu-button>
    </Draggable>
</template>

<script>
    import Draggable from 'vuedraggable'
    export default {
        name: "EzSort",
        components:{
            Draggable
        },
        props: {
            config: {
                default: [{label: "名称", key: "name"}]
            }
        },
        data() {
            return {
                list: []
            }
        },
        mounted() {
            for (let item of this.config) {
                this.list.push({
                    label: item.label,
                    key: item.key,
                    value: "",
                    state: 0,
                    set(_this){
                        _this.state = (_this.state+1) % 3
                    }
                })
            }
        },
        methods: {
            change(item){
                item.set(item)
                this.updateValue()
            },
            updateValue(){
                let v = []
                for (let item of this.list) {
                    if (item.state === 1){
                        v.push("-" + item.key)
                    }
                    if (item.state === 2){
                        v.push("" + item.key)
                    }
                }
                this.$emit("change",v)
            },

            setIcon(state) {
                switch (state) {
                    case 1:
                        return "arrow_downward"
                    case 2:
                        return "arrow_upward"
                    default:
                        return "block"
                }
            },
            setType(state) {
                switch (state) {
                    case 1:
                        return "primary"
                    case 2:
                        return "primary"
                    default:
                        return "grey500"
                }
            }
        },
        computed: {}
    }
</script>

<style scoped>

</style>
